import React from "react";
import { Button, Form, Space, Timeline, Switch, InputNumber, DatePicker, message, Alert, Row, Col } from "antd";
import { apiAutomationLikeDetail, apiAutomationLikeAdd, apiGetLog } from '@/request/petCircleUtil/autoGive'
import TheButton from "@/components/TheButton";

import "./style/style.less"
class AutoGive extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      btnLoading: false,
      logArr: [],//操作日志
      initialValues: {},
      formValue: {}
    };
  }
  async componentDidMount() {
    await this.getData()
    await this.getLog()
  }
  getData = async () => {
    let res = await apiAutomationLikeDetail()
    if (res.code === 0 && res.data) {
      this.formRef.setFieldsValue({
        ...res.data
      })
      this.setState({
        initialValues: { ...res.data },
      })
    }
  }
  // 操作日志
  getLog = async () => {
    let res = await apiGetLog({ dataType: 6, dataId: 0 })
    if (res.code === 0 && res.data) {
      this.setState({
        logArr: res.data
      })
    }
  }
  // 输入框失去焦点
  onBlur = (e, minKey, maxKey) => {
    let values = this.formRef.getFieldValue()
    const min = values[minKey], max = values[maxKey]
    if (max !== null && min !== null) {
      if (min > max) {
        this.formRef.setFieldsValue({
          [maxKey]: min,
          [minKey]: max
        })
      }
    }
  }
  //form表单确定事件
  onFinish = async (values) => {
    let { initialValues } = this.state
    if (values.automationLike === "0") {
      values = initialValues
      values.automationLike = "0"
    }
    let res = await apiAutomationLikeAdd({ ...values })
    if (res.code === 0) {
      React.$message({
        type: 'info',
        content: '保存成功'
      })
      this.getData()
      this.getLog()
    }
  }
  // 重置
  onCancel = () => {
    this.getData()
  }
  render() {
    let { initialValues, btnLoading, logArr } = this.state
    return (
      <Row style={{ overflow: 'hidden' }}>
        <Col span={18}>
          <div className='p-layout-box' style={{ height: '90vh' }}>
            <Alert message="自动点赞规则：设置点赞数量范围，每天凌晨1点，定时查出点赞数量符合“需点赞的动态点赞数量范围”以下配置区间，计入需点赞任务池，再从中选择部分动态进行点赞。每天点赞n次，时间范围为上午9点到晚上6点，每次点赞数量随机范围内选择" type="info" />
            <Form
              onFinish={this.onFinish}
              ref={ref => this.formRef = ref}
              labelCol={{
                span: 6,
              }}
              wrapperCol={{
                span: 14,
              }}
            >
              <Form.Item
                label="自动点赞开关"
                name="automationLike"
                getValueProps={v => ({ checked: v == 1, value: v })}
                getValueFromEvent={e => e ? '1' : '0'}
              >
                <Switch />
              </Form.Item>
              <Form.Item noStyle shouldUpdate>
                {
                  ({ getFieldValue }) => <>
                    {
                      getFieldValue('automationLike') == 1 && <div>
                        <Form.Item label="需点赞的动态点赞数量范围" required style={{ marginBottom: 0 }}>
                          <Form.Item rules={[{ required: true, message: "请输入最小值" }]} style={{ display: 'inline-block' }} name="minLike">
                            <InputNumber style={{ width: "100px" }} min={0} precision={0} onBlur={(e) => this.onBlur(e, "minLike", "maxLike")} />
                          </Form.Item>
                          <span className="u-form-text" >一</span>
                          <Form.Item rules={[{ required: true, message: "请输入最大值" }]} style={{ display: 'inline-block' }} name="maxLike">
                            <InputNumber style={{ width: "100px" }} precision={0} min={1} max={100} onBlur={(e) => this.onBlur(e, "minLike", "maxLike")} />
                          </Form.Item>
                          <span className="u-form-text">范围内</span>
                        </Form.Item>
                        <Form.Item rules={[{ required: true }]} label="点赞次数" name="likeNum">
                          <InputNumber style={{ width: "100px" }} min={1} precision={0} />
                        </Form.Item>
                        <Form.Item label="随机点赞次数范围" required >
                          <Form.Item rules={[{ required: true, message: "请输入最小值" }]} style={{ display: 'inline-block' }} name="minRandomLike">
                            <InputNumber style={{ width: "100px" }} min={1} precision={0} onBlur={(e) => this.onBlur(e, "minRandomLike", "maxRandomLike")} />
                          </Form.Item>
                          <span className="u-form-text" >一</span>
                          <Form.Item rules={[{ required: true, message: "请输入最大值" }]} style={{ display: 'inline-block' }} name="maxRandomLike">
                            <InputNumber style={{ width: "100px" }} min={1} max={1000} precision={0} onBlur={(e) => this.onBlur(e, "minRandomLike", "maxRandomLike")} />
                          </Form.Item>
                          <span className="u-form-text">范围内</span>
                        </Form.Item>
                      </div>

                    }
                  </>
                }

              </Form.Item>
              <Form.Item
                wrapperCol={{
                  offset: 4,
                  span: 16,
                }}
              >
                <Space>
                  <Button onClick={() => this.onCancel()}>取消</Button>
                  <TheButton loading={btnLoading} haspermi={["petCircleUtil:autoGive:save"]} htmlType="submit" type="primary">保存</TheButton>
                </Space>
              </Form.Item>
            </Form>
          </div>
        </Col>
        <Col span={6}>
          <div className=' p-layout-box' style={{ marginLeft: '20px', height: '90vh' }} >
            <p>操作日志</p>
            <Timeline>
              {logArr.map(item => {
                return <Timeline.Item color="gray">
                  <div>{item.info}</div>
                  <div style={{ display: 'flex', color: '#999999' }}>
                    <div style={{ marginRight: '10px' }}>{item.operationUserName}</div>
                    <div>{item.operationTime}</div>
                  </div>
                </Timeline.Item>
              })}
            </Timeline>
          </div>
        </Col>
      </Row >
    )
  }
}
export default AutoGive